{extend name="default/template/base_index"/}


{block name="area_header"}
<!--<script type="text/javascript" charset="utf-8" src="__CDN__/ueditor/1.4.3/ueditor.config.js"></script>-->
<!--<script type="text/javascript" charset="utf-8" src="__CDN__/ueditor/1.4.3/ueditor.all.min.js"> </script>-->

<link type="text/css" rel="stylesheet" href="__CDN__/comp/wxuploader.css?v=__APP_VERSION__"/>
<link type="text/css" rel="stylesheet" href="__CDN__/jquery-uploadify/3.2.1/uploadify.css"/>
<link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
<script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
<style type="text/css">
	.banner.wxuploaderimg .img-preview img {
		width: 320px;
		height: 150px;
	}
</style>

<link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css"/>
<style type="text/css">
	.select2-container--default .select2-selection--single .select2-selection__placeholder {
		color: #E7E7E7;
	}

	.select2-container--default .select2-selection--single {
		background-color: #2780e3;
		border: 0px solid #aaa;
		border-radius: 4px;
	}

	.select2-container {
		background: #2780e3;
		color: #fff;
		padding: 2px;
		margin: 0px;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #F5F5F5;
	}

	.select2-container--default .select2-search--dropdown .select2-search__field {
		color: #444;
	}

	.wxnumber-item {
		background: #DFC2C2;
		width: auto;
		display: inline-block;
		padding: 5px;
		margin: 5px;
	}

	.wxnumber-item i.fa {
		margin: 0px 5px;
		cursor: pointer;
	}

	.modal-backdrop, .modal-dialog {
		z-index: 0;
	}

	.tangram-suggestion-main {
		z-index: 123456789;
	}
</style>
{/block}

{block name="area_body"}
{include file="default/Widget/topbar" /}
<div class="admin-main container-fluid">
	{include file="default/Widget/left" /}
	<div class="admin-main-content">
		{include file="default/Widget/breadcrumb" /}

		<!-- 带验证 form -->
		<form class="form-horizontal well validateForm">
			<fieldset>
				<legend>
					创建店铺
				</legend>
				<div class="form-group">
					<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺名称</label>
					<div class="col-md-10 col-lg-10">
						<input type="text" class="required form-control input-short input-sm" value="{$stores.name}" name="name" id="inputtitle"
							   placeholder="请输入店铺名称">
						<div class="help-block">(店铺名称)</div>
					</div>
				</div>
				<input  type="hidden" name="id" value="{$stores.id}" />
				<div class="form-group">
					<label for="inputservice_phone" class="col-md-2 col-lg-2 control-label">客服电话</label>
					<div class="col-md-10 col-lg-10">
						<input type="text" class="required form-control input-short input-sm" value="{$stores.phone}" name="phone"
							   id="phone" placeholder="请输入客服电话">
						<div class="help-block">(请输入客服电话)</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺logo</label>
					<div class="col-md-10 col-lg-10">
						<input type="hidden" class="required form-control input-short input-sm" name="logo" id="inputlogo" placeholder="请输入店铺logo、头像。">
						<div class="wxuploaderimg clearfix logo {notempty name="stores.logo"}checked{/notempty}"  data-maxitems="1">
						<div class="img-preview clearfix" >
							{notempty name="stores.logo"}
							<div class="pull-left clearfix img-item">
								<img src="{:getImgUrl($stores['logo'])}"  data-imageid="{$stores.logo}" />
								<div class="edit_pic_wrp"><a href="javascript:;" class="fa fa-lg fa-trash js_delete"></a></div>
							</div>
							{/notempty}
						</div>
						<div class="add">
							<i class="fa fa-plus"></i>
						</div>
					</div>
					<div class="help-block">(请上传店铺logo或头像,建议尺寸：120像素 * 120像素,,50KB以下)</div>
				</div>

				<div class="form-group baidumap_position">
					<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺经纬度</label>
					<div class="col-md-10 col-lg-10">
						经度<input type="text" value="{$stores.lng}"" name="lng" class="lng"/>纬度<input type="text" value="{$stores.lat}"" name="lat" class="lat"/>
						<button type="button" class="js_baidumap btn btn-primary btn-sm" data-toggle="modal"
								data-target="#baidumap">点击选择百度地图
						</button>
						<div class="help-block">(百度地图内省市区为必选项)</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputtitle" class="col-md-2 col-lg-2 control-label">门店详细地址</label>
					<div class="col-md-10 col-lg-10">
						<input type="text" class="required form-control input-short input-sm" name="addres" id="inputtitle"
							   value="{$stores.addres}" placeholder="请输入门店详细地址">
						<div class="help-block">(门店详细地址)</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputtitle" class="col-md-2 col-lg-2 control-label">营业时间</label>
					<div class="col-md-10 col-lg-10">
						<input type="text" class="required form-control input-short input-sm" name="open_time" id="inputtitle"
							   value="{$stores.open_time}"   placeholder="请输入营业时间">
						<div class="help-block">(您可以输入营业时间)</div>
					</div>
				</div>

				<div class="form-group">
					<input type="hidden" class="required form-control input-short" value="{$stores.province}" name="province" id="PRO">
					<input type="hidden" class="required form-control input-short" value="{$stores.city}" name="city" id="CITY">
					<input type="hidden" class="required form-control input-short"  value="{$stores.area}" name="area" id="AREA">
				</div>

				<div class="form-group">
					<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺简介</label>
					<div class="col-md-5 col-lg-5">
						<textarea name="desc" class="form-control" rows="5" cols="30">{$stores.desc}</textarea>
						<div class="help-block">(您可以输入店铺简介)</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2 col-lg-2 control-label">&nbsp;</label>
					<div class="col-lg-10 col-md-10">
						<a target-form="validateForm" class="ajax-post btn btn-primary btn-sm" onclick="return getData();"
						   href="{:url('Stores/edit')}" autofocus="autofocus"><i class="fa fa-save"></i>
							{:L('BTN_SAVE')}</a>
						<a class="btn btn-primary btn-sm" href="{:url('Stores/index')}"><i
								class="fa fa-times-circle"></i> {:L('BTN_CANCEL')}</a>
					</div>
				</div>
			</fieldset>
		</form>
		<!-- form -->

		<script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.min.js"></script>
		<script type="text/javascript" src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
		<script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
		{include file="default/template/wxpicture"/}

		{include file="default/template/baidumap"/}

	</div>
	<!-- END admin-main-content -->
</div>
<!-- END admin-main-->
{/block}

{block name="area_footer"}

<script type="text/javascript">
		$(function(){

		})
	$('.startdatetime').datetimepicker({
		lang: 'ch',
		format: 'Y-m-d H:i:s',
		timepicker: false,
	});
	$('.enddatetime').datetimepicker({
		lang: 'ch',
		format: 'Y-m-d  H:i:s',
		timepicker: false,
	});
</script>
<script type="text/javascript">
	$(function(){
		var province = $("#baidumap #province").val("{$stores.province}");
		pac("{$stores.province}","city");//生成，默认省的市
		pac("{$stores.city}","area");//生成，默认市的区
		var city = $("#baidumap #city").val("{$stores.city}");
		var area = $("#baidumap #area").val("{$stores.area}");
	})
	function getData() {
		var logo = $(".wxuploaderimg.logo img").attr("data-imageid");
		var banner = $(".wxuploaderimg.banner img").attr("data-imageid");

		var province = $("#baidumap #province").val();
		var city = $("#baidumap #city").val();
		var area = $("#baidumap #area").val();

		$("#inputlogo").val(logo);
		$("#inputbanner").val(banner);
		$("#PRO").val(province);
		$("#CITY").val(city);
		$("#AREA").val(area);

		$("#inputweixin_number_name").val("");
		$(".js_weixin_number_list .wxnumber-item").each(function (index, item) {
			var text = "";
			$("#inputweixin_number_name").val($("#inputweixin_number_name").val() + $(item).text() + ",");

		});
		return true;
	}
	function appendWeixinNumber(weixin, openid) {
		var len = $("#inputweixin_number").val().split(",").length - 1;

		if (len > 5) {
			$.scojs_message("不能超过5个！", $.scojs_message.TYPE_ERROR);
			return;
		}
		$("#inputweixin_number").val($("#inputweixin_number").val() + openid + ",");

//		console.log(weixin);
		$cont = $(".js_weixin_number_list");
		$item = $("<div class='wxnumber-item'>" + weixin + "<i class='fa fa-times js_removed'></i></div>");
		$cont.append($item);
		$item.attr("data-id", openid);
	}
	function removeWeixinNumber(ele) {
//		console.log(ele);
		var str = $("#inputweixin_number").val();
		var openid = ele.attr("data-id");
		$("#inputweixin_number").val(str.replace(openid + ",", ""));
		ele.remove();
		$cont = $(".js_weixin_number_list");
	}
	$(function () {
		$(".js_weixin_number_list").click(function (ev) {
			$ele = $(ev.target);
			if ($ele.hasClass("js_removed")) {
				removeWeixinNumber($ele.parent());
			}
		});

		wxuploadimg.init({cont: ".wxuploaderimg"});

		$(".baidumap_position").baidumap();


		$("#user_select2").select2({
			placeholder: "输入用户id或昵称查询",
			language: "zh-CN",
			ajax: {
				url: "{:url('Wxuser/select')}",
				dataType: 'json',
				delay: 250,
				data: function (params) {
					var queryParameters = {
						q: params.term
					}
					return queryParameters;

				},
				processResults: function (data, page) {
					if (!data.info) {
						data.info = new Array();
						data.info['nodata'] = "无相关数据";
					}
					// parse the results into the format expected by Select2.
					// since we are using custom formatting functions we do not need to
					// alter the remote JSON data
					return {
						results: data.info
					};
				},
				cache: true
			},
			minimumInputLength: 0,
			templateSelection: function (repo) {
				var selection = repo.nickname || repo.text;
				if (repo.nickname) {
					var openid = repo.openid;
					console.log(repo);
					if ($("#inputweixin_number").val().indexOf(openid) === -1) {
						appendWeixinNumber(selection, openid);
					}
				}
				return selection;
			},
			templateResult: function (repo) {

				if (repo.loading) return repo.text;
				if (repo.nodata) return repo.nodata;
//    				var markup = '<div>'+repo.nickname+'</div>';
				var markup = '<div><img src="' + repo.avatar + '" style="width:30px;height:30px;"/>[id:' + repo.id + '] ' + repo.nickname + '</div>';
				return markup;
			},
		});

	})
</script>
{/block}